<template>
	<view class="content">
		
		<image src="../../static/images/bg6.png" mode="widthFix" class="bg_img"></image>
		<view style="height:80upx">
		<view class="fixed_tp">
			<image src="../../static/images/left.png" mode="widthFix" class="left_img" @click="back"></image>
			<view class="fixed_tit">余额</view>
			<navigator class="fixed_right" hover-class="none" url="/pagesA/my/bill">
				<image src="/static/images/baiedit.png" mode="widthFix" style="width: 25upx;"></image>
				账单明细
			</navigator>
		</view>
		</view>
		
		<view class="ikf">
			<view class="ikf_text">余额（元）</view>
			<view class="num">7000.00</view>
		</view>
		
		<!-- end -->
		
		<view class="info">
			<view class="label">我要充值</view>
			<view class="list">
				<view :class="list_current == index ? 'list_sm_active list_sm' : 'list_sm'" v-for="(item,index) in list" @click="changelist(item,index)">
					<text class="badge">超值</text>
					<view class="list_sm_tit">{{item.money}}</view>
					<view class="list_sm_text">充{{item.money}}送{{item.song}}元</view>
				</view>
			</view>
			<input type="number" class="input" placeholder="输入充值金额" @input="input" v-model="input_value"/>
		</view>
		
		<!-- end -->
		<view class="pay_view">
		 <u-radio-group
		    v-model="radiovalue1"
		    placement="column"
		    @change="groupChange"
			iconPlacement="right"
			activeColor="#07c160"
		  >
		    <u-radio
		      :customStyle="{marginBottom: '8px'}"
		      v-for="(item, index) in radiolist1"
		      :key="index"
		      :label="item.name"
		      :name="item.name"
		    >
		    </u-radio>
		  </u-radio-group>
		</view>
		
		<!-- end -->
		
		<view class="text_asd">1.充值的本金和赠送金额均不可提现、转移、转赠。</view>
		<view class="text_asd">2.使用范围：本平台所有项目购买，以及交通费用支付。</view>
		
		<view class="shop_bt_view">
		<view class="shop_bt">
									   <view class="shop_bt_left">
												￥{{money}}
									   </view>
									   <view class="shop_bt_right" @click="submit">
									   			立即充值					   
									   </view>
		</view>
		</view>
		<u-popup :show="show" mode="center" :round="10" :mask-close-able="true" @close="show = false">
			<view style="text-align: center;padding:20upx 0;font-weight: 700;width:400rpx; height:100rpx;line-height:100rpx;">请先绑定手机号</view>
			<button @click="goPhone" class="button" style="text-align: center;width:100%;">确定</button>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data (){
			return {
			radiolist1: [
			        {
			          name: '微信支付',
			          disabled: false
			        },
			        // {
			        //   name: '支付宝支付',
			        //   disabled: false
			        // },
			      ],
			      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			      radiovalue1: '微信支付',
				  list:[
					  {
						  money:1000,
						  song:100
					  },
					  {
					  						  money:1500,
					  						  song:150
					  },
					  {
					  						  money:2000,
					  						  song:200
					  },
					  {
					  						  money:2500,
					  						  song:250
					  }
				  ],
				  list_current:0,
				  money:'',  //充值金额
				  input_value:'',
					memberCard:{},
					show:false,
				}
				},
				onShow (){
					this.money=this.list[0].money
				},
				onLoad: function(option) {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.on('data', (data) => {
						this.memberCard = data.data
					})
				},
				methods:{
					back (){
						uni.navigateBack(-1)
					},
					groupChange(n) {
					       console.log('groupChange', n);
					     },
					changelist (item,index){
						console.log(item)
						this.money=item.money;
						this.input_value='';
						this.list_current=index;
					},
					input (e){
						console.log(e.detail.value)
						if(e.detail.value){
							this.list_current=-1;
							this.money=e.detail.value;
							this.input_value=e.detail.value;
						}
						if(this.input_value ==''){
							this.money=0;
						}
					},
					submit(){
						let customerId = uni.getStorageSync('customerId')
						let nonPhone = uni.getStorageSync('nonPhone')
						if(nonPhone == 1){
							this.show = true
						}else{
							this.$post(this.$api.memberCardInvest, {memberRechargeReq:{memberId:this.memberCard.memberId,payList:[{momey:this.money,payType:1}]},customerId,},
								(res) => {
									console.log(res,'res');
									if (res.code !== 200) return
									if (res.code == 200) {
										//微信支付//WX JSAPI
										WeixinJSBridge.invoke(
											'getBrandWCPayRequest', {
												"appId": res.data.appId, //公众号名称，由商户传入     
												"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
												"nonceStr": res.data.nonceStr, //随机串     
												"package": res.data.pack, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
												"signType": res.data.signType, // 签名方式，
												"paySign": res.data.paySign, //微信签名  
											},
											function(res) {
												// 支付成功
												if (res.err_msg == "get_brand_wcpay_request:ok") {
													uni.showToast({
														title: '支付成功'
													})
													uni.switchTab({
														url:'/pages/order/index'
													})
													this.list = [];
													this.money = 0;
													this.btn_view = false;
												}
												// 支付过程中用户取消
												if (res.err_msg == "get_brand_wcpay_request:cancel") {
													uni.showToast({
														title: '取消支付,请重新支付',
														icon: 'none'
													})
												}
												// 支付失败
												if (res.err_msg == "get_brand_wcpay_request:fail") {
													uni.showToast({
														title: '支付失败，请重新支付',
														icon: 'none'
													})
												}
												/**
												 * 其它
												 * 1、请检查预支付会话标识prepay_id是否已失效
												 * 2、请求的appid与下单接口的appid是否一致
												 * */
												if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
													uni.showToast({
														title: '调用支付JSAPI缺少参数',
														icon: 'none'
													})
												}
											})
									} else {
										this.handleError(res);
									}
								}, (res) => {
									this.handleError(res);
								}, 1, 0)
						}
					},
					goPhone(){
						this.show = false
						uni.navigateTo({
							url:'/pagesA/set/bindtel'
						})
					},
					handleError(res) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						});
					},
				}
				}
</script>

<style>
	.fixed_tp{
		position: relative;
		background-color: initial;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		height:100%;
		background-color: #f7f7f7;
		padding-bottom:180upx;
	}

	.title{
		font-weight: 700;
		font-size:28upx;
	}
	.ikf{
		text-align: center;
		position: relative;
		margin-top:60upx;
		color:#fff;
	}
	.num{
		font-size:60upx;
		font-weight: 700;
		margin-top:10upx;
	}
	.ikc{
		width:100upx;
		padding:15upx 50upx;
		background-color: #fff;
		border-radius: 100upx;
		color:#07c160;
		margin:20upx auto;
	}
	.shop_bt_view{
		margin:30upx 0;
		width:100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom:0;
		left:0;
	}
	.shop_bt{
		width:90%;
		height:90upx;
		line-height: 90upx;
		border-radius: 100upx;
		background-color: #333;
		color:#fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.shop_bt_left{
		width:70%;
		height:100%;
		font-size:35upx;
		text-indent: 30upx;
	}
	.shop_bt_right{
		width:30%;
		height:100%;
		background-color: #07c160;
		border-radius:0 100upx 100upx 0;
		text-align: center;
	}
	.info{
		width:85%;
		margin:0 auto;
		padding:30upx;
		background-color: #fff;
		margin-top:80upx;
		border-radius: 10upx;
		font-size:28upx;
		position: relative;
	}
	.label{
		font-weight: 700;
	}
	.pay_view{
		width:85%;
		margin:30upx auto;
		padding:15upx 30upx;
		background-color: #fff;
		border-radius: 10upx;
		font-size:28upx;
	}
	::v-deep .u-radio-label--right{
		margin-top:20upx;
	}
	.list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top:30upx;
	}
	.list_sm{
		width:48%;
		padding:40upx 0;
		border-radius: 10upx;
		background-color: #e3fdf0;
		text-align: center;
		position: relative;
		font-size:28upx;
		white-space: nowrap;
		margin-bottom:20upx;
	}
	.list_sm_active{
		background-color: #07c160;
		color:#fff;
	}
	.list_sm_active .list_sm_tit{
		color:#fff;
	}
	.list_sm_tit{
		font-size:45upx;
		font-weight: 700;
		color:#07c160;
		margin-bottom:10upx;
	}
	.badge{
		font-size:22upx;
		background-color: #ede2a2;
		color:#a36e2a;
		padding:5upx 15upx;
		border-radius: 10upx 0 10upx 0;
		position: absolute;
		left:0;
		top:0;
	}
	.input{
		width:95%;
		padding-left:5%;
		height:80upx;
		font-size:28upx;
		background-color: #e3fdf0;
		border-radius: 10upx;
		margin:10upx 0 0;
	}
	.text_asd{
		width:85%;
		margin:10upx auto;
		font-size:22upx;
		color:#999;
	}
</style>